<template>
  <div class="login">
    <div class="login_img">
      <img src="../assets/images/pic1.jpg">
    </div>
    <div class="login_inp">
      <div class="register_title">免费注册</div>
      <div class="register_inp">
        <input spellcheck="false" type="text" placeholder="用户名" v-model="userName">
        <input spellcheck="false" type="text" placeholder="手机号" v-model="reg_phone" @blur="userPhone">
        <i class="iconfont icon-jinggao" v-show="showPhone"><span>手机号不正确</span></i><br/>
        <input spellcheck="false" type="text" placeholder="验证码" v-model="reg_code"/>
        <button href="#" class="code" :disabled="isDisabled" @click="countDown">{{content}}</button>
        <input spellcheck="false" maxlength="16" minlength="6" :type="psdType" placeholder="设置密码：6-16位字符，包含字母和数字" v-model="reg_psd" />
        <i v-show="showGuan" @click="open" class="iconfont icon-yanjing-guan"></i>
        <i v-show="!showGuan" @click="close" class="iconfont icon-yanjing-kai"></i>
      </div>
      <div class="register_btn" >
        <label><w-button class="a" type="text" @click="handleReg" >注册账号</w-button></label>
      </div>
      
      <div class="register">
        <p>已有账号？</p>
        <router-link to="/">马上登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Register',
    data() {
      return {
        content:'获取验证码',
        time:60,
        psdType: "password",
        showGuan: true,
        reg_phone:'',
        showPhone:false,
        reg_code:'',
        reg_psd:'',
        userName:'',
        isDisabled:false
      }
    },
    methods: {
      countDown(){
        this.$axios({
          method:"GET",
          url:"http://1.15.170.222:88/api/service/sms/"+this.reg_phone,
        }).then((response) => {
          console.log(response);
          let code = response.data.code;
          if(code === 204){
            this.$alert("重复请求", "提示", {
              confirmButtonText: "确定",
            })
          }
        })
        if(this.reg_phone != ''){
          this.content = this.time + 's后重新发送';
          let timer = window.setInterval(() => {
              this.time--
              this.content = this.time + 's后重新发送'
              this.isDisabled = true
              if (this.time < 0) {     //当倒计时小于0时清除定时器
                  window.clearInterval(timer)
                  this.isDisabled = true
                  this.content = '重新获取验证码';
                  this.time = 60
              }
          },1000)
        }else {
          this.$alert("手机号为空", "提示", {
              confirmButtonText: "确定",
            })
        }
      },
      open() {
      this.showGuan = false;
      this.psdType = "text";
      },
      close() {
        this.showGuan = true;
        this.psdType = "password";
      },
      userPhone(){
        if(this.reg_phone === ''){
          this.showPhone = true
        }
        let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
        if(!phoneReg.test(this.reg_phone)){
          this.showPhone = true
        }else {
          this.showPhone = false
        }
      },
      handleReg(){
        this.$axios({
          method:"POST",
          url:"http://1.15.170.222:88/api/user/register",
          data:{
            username:this.userName,
            phone:this.reg_phone,
            password:this.reg_psd,
            code:this.reg_code
          }
        }).then((response) => {
          console.log(response);
          let code = response.data.code;
          if(code === 203){
            this.$alert("验证码错误", "提示", {
              confirmButtonText: "确定",
            })
          }else if(code === 202){
            this.$alert("用户名或者手机号已存在", "提示", {
              confirmButtonText: "确定",
            })
          }else {
            this.$alert("注册成功", "提示", {
              confirmButtonText: "确定",
            })
            this.$router.push({
              path:'/login'
            })
          }
        })
      }
    }
}
</script>

<style>
.register_title {
  margin: 50px auto 10px;
  width: 66px;
  border-bottom: 2px solid #00BFFF;
}
.register_inp input {
  width: 330px;
  height: 40px;
  margin-left: 50px;
  margin-top: 20px;
  border: none;
  border-bottom: 1px solid #d3d7d4;
  outline: none;
}
.register_btn {
  margin: 28px auto;
  margin-bottom: 10px;
  width: 300px;
  height: 40px;
  border-radius: 30px;
  cursor: pointer;
  background-color: #00bfff;
}
.register_btn .a {
  width: 100%;
  height: 100%;
  line-height: 0;
  text-align: center;
  color: #fff;
  background:none;
  border: none;
  font-size: 14px;
}
.icon-jinggao {
  color: red;
  font-size: 2px;
  margin-left: -90px;
}
.icon-jinggao span {
  font-size: 12px;
  margin-left: 3px;
}
</style>